<html>
<head>
<style>
.float {
  width:200px;
  height:200px;
  background-color:red;
  float:left;
}

.container {
  height:200px;
}

.pct { width:50%; }

table { border:2px solid green; }

img { display: block; height:50px; background-color: green }

.overflow { border:2px solid blue; overflow:scroll }
</style>
</head>

<body>

<div class="container">
<div class="float"></div>
<table>
<tr><td>This is a table. It should sit on the same line as the float and wrap as needed to fit
within the remaining line width.
</table>
</div>

<div class="container">
<div class="float"></div>
<div class="overflow">
This is an overflow:scroll region. It should sit on the same line as the float and wrap as needed to fit
within the remaining line width.
</div>
</div>

<div class="container">
<div class="float"></div>
<hr>
</div>

<div class="container">
<div class="float"></div>
<table class="pct">
<tr><td>This is a table. It should sit on the same line as the float and wrap as needed to fit
within the remaining line width.
</table>
</div>

<div class="container">
<div class="float"></div>
<div class="overflow pct">
This is an overflow:scroll region. It should sit on the same line as the float and wrap as needed to fit
within the remaining line width.
</div>
</div>

<div class="container">
<div class="float"></div>
<hr class="pct" align=left>
</div>

<div class="container">
<div class="float"></div>
<img class="pct">
</div>

</div>
